<template>
	<view>
		<!-- banner -->
		<u-swiper :list="banner" previousMargin="30" nextMargin="30" keyName="image" :indicator="true"></u-swiper>
		
		<!-- 菜单导航栏 -->
		
		<view class="menu-nav">
			<u-scroll-list>
				<view class="scroll-list">
					<view class="scroll-list__line" v-for="(item, index) in menuArr" :key="index">
						<view class="scroll-list__line__item" v-for="(item1, index1) in item" :key="index1"
							:class="[(index1 === item.length - 1) && 'scroll-list__line__item--no-margin-right']">
							<image class="scroll-list__line__item__image" :src="menuBaseUrl + item1.icon" mode="">
							</image>
							<text class="scroll-list__line__item__text">{{ item1.name }}</text>
						</view>
					</view>
				</view>
			</u-scroll-list>
		</view>
		
		<!-- 滚动新闻 -->
		<u-notice-bar :text="notice_arr" direction="column" color="#000"></u-notice-bar>
		
		<!-- 标题样式 -->
		<view class="title-s1">
			<text class="title">热销商品</text>
			<view class="right-more">
				<text>更多</text>
				<u-icon name="arrow-right" :bold="true" color="#d33"></u-icon>
			</view>
		</view>
		
		<!-- 商品列表 -->
		<view class="goods-list column-2 clearfix">
			<view class="goods-item" v-for="(item, index) in goodsList" :key="index"
				@click="onTargetDetail(item.goods_id)">
		
				<view class="">
					<view class="goods-image">
						<image class="image" mode="aspectFill" :src="item.goods_image"></image>
					</view>
					<view class="detail">
						<view class="goods-name twoline-hide">
							{{ item.goods_name }}
						</view>
						<view class="detail-price oneline-hide">
							<text class="goods-price f-30 col-m">￥{{ item.goods_price_min }}</text>
							<text v-if="item.line_price_min > 0"
								class="line-price col-9 f-24">￥{{ item.line_price_min }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner: [{
					image: 'http://image.laravelvip.com/images/site/1/images/2021/06/27/16247897934747.jpg?x-oss-process=image/format,webp/quality,q_75',
					title: '',
				}, {
					image: 'http://image.laravelvip.com/images/site/1/images/2021/06/27/16247897934747.jpg?x-oss-process=image/format,webp/quality,q_75',
					title: ''
				}, {
					image: 'http://image.laravelvip.com/images/site/1/images/2021/06/27/16247897934747.jpg?x-oss-process=image/format,webp/quality,q_75',
					title: ''
				}],
				menuBaseUrl: 'https://cdn.uviewui.com/uview/menu/',
				menuArr: [
					[{
							name: '天猫新品',
							icon: '11.png'
						},
						{
							name: '今日爆款',
							icon: '9.png'
						}, {
							name: '天猫国际',
							icon: '17.png'
						}, {
							name: '饿了么',
							icon: '6.png'
						}, {
							name: '天猫超市',
							icon: '11.png'
						}, {
							name: '分类',
							icon: '2.png'
						}, {
							name: '天猫美食',
							icon: '3.png'
						}, {
							name: '阿里健康',
							icon: '12.png'
						}, {
							name: '口碑生活',
							icon: '7.png'
						}
					],
					[{
							name: '充值中心',
							icon: '8.png'
						},
						{
							name: '机票酒店',
							icon: '10.png'
						}, {
							name: '金币庄园',
							icon: '18.png'
						}, {
							name: '阿里拍卖',
							icon: '15.png'
						}, {
							name: '淘宝吃货',
							icon: '16.png'
						}, {
							name: '闲鱼',
							icon: '4.png'
						}, {
							name: '会员中心',
							icon: '6.png'
						}, {
							name: '造点新货',
							icon: '13.png'
						}, {
							name: '土货鲜食',
							icon: '14.png'
						}
					]
				],
				notice_arr: [
					'乐云商城】V2.1版 2018年6月更新日志',
					'乐云商城】V2.1版 2018年6月更新日志',
					'乐云商城】V2.1版 2018年6月更新日志',
				],
				goodsList: [{
						goods_id: 1,
						goods_image: 'http://image.laravelvip.com/images/backend/collect/images/2021/07/08/16257544167653.jpg?x-oss-process=image/resize,m_pad,limit_0,h_320,w_320',
						goods_name: '今大福 2020年 风华青饼 普洱茶生茶 357克/饼',
						selling_point: '卖点',
						goods_sales: '300',
						goods_price_min: '12.33',
					},
					{
						goods_id: 1,
						goods_image: 'http://image.laravelvip.com/images/backend/collect/images/2021/07/08/16257544167653.jpg?x-oss-process=image/resize,m_pad,limit_0,h_320,w_320',
						goods_name: '今大福 2020年 风华青饼 普洱茶生茶 357克/饼',
						selling_point: '卖点',
						goods_sales: '300',
						goods_price_min: '12.33',
					},
					{
						goods_id: 1,
						goods_image: 'http://image.laravelvip.com/images/backend/collect/images/2021/07/08/16257544167653.jpg?x-oss-process=image/resize,m_pad,limit_0,h_320,w_320',
						goods_name: '今大福 2020年 风华青饼 普洱茶生茶 357克/饼',
						selling_point: '卖点',
						goods_sales: '300',
						goods_price_min: '12.33',
					},
					{
						goods_id: 1,
						goods_image: 'http://image.laravelvip.com/images/backend/collect/images/2021/07/08/16257544167653.jpg?x-oss-process=image/resize,m_pad,limit_0,h_320,w_320',
						goods_name: '今大福 2020年 风华青饼 普洱茶生茶 357克/饼',
						selling_point: '卖点',
						goods_sales: '300',
						goods_price_min: '12.33',
					},
				],
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.menu-nav {
		margin: 15px;
	}

	.scroll-list {
		@include flex(column);

		&__line {
			@include flex;
			margin-top: 10px;

			&__item {
				margin-right: 15px;

				&__image {
					width: 61px;
					height: 48px;
				}

				&__text {
					margin-top: 5px;
					color: $u-content-color;
					font-size: 12px;
					text-align: center;
				}

				&--no-margin-right {
					margin-right: 0;
				}
			}
		}
	}

	// 标题样式一
	.title-s1 {
		margin: 15px;
		height: 10px;
		font-size: 14px;
		font-weight: bold;
		line-height: 10px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.title {
			color: #d33;
		}

		.right-more {
			display: flex;
			flex-direction: row;
		}

	}

	// 商品列表 start
	.goods-list {
		padding: 4rpx;
		box-sizing: border-box;
	}

	// 平铺显示
	.goods-list.column-2 {
		.goods-item {
			width: 50%;
		}
	}

	.goods-item {
		float: left;
		box-sizing: border-box;
		padding: 3px;


		.goods-image {
			position: relative;
			width: 100%;
			height: 0;
			padding-bottom: 100%;
			overflow: hidden;
			background: #fff;

			&:after {
				content: '';
				display: block;
				margin-top: 100%;
			}

			.image {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				-o-object-fit: cover;
				object-fit: cover;
			}
		}

		.detail {
			padding: 8rpx;
			background: #fff;

			.goods-name {
				height: 64rpx;
				line-height: 32rpx;
				white-space: normal;
				color: #484848;
				font-size: 26rpx;
			}

			.detail-price {
				.goods-price {
					margin-right: 8rpx;
				}

				.line-price {
					text-decoration: line-through;
				}
			}
		}
	}

	// 商品列表 stop
</style>
